<template>
  <div class="user-center-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="sidebar-card">
          <div class="user-profile">
            <el-avatar :size="80" :src="userAvatar"></el-avatar>
            <h3>{{ username }}</h3>
            <p>{{ roleLabel }}</p>
          </div>
          <el-divider></el-divider>
          <el-menu
            :default-active="activeMenu"
            class="user-center-menu"
            @select="handleMenuSelect">
            <el-menu-item index="/user/account">
              <el-icon><User /></el-icon>
              <span>账号管理</span>
            </el-menu-item>
            <el-menu-item index="/user/enterprise">
              <el-icon><Office /></el-icon>
              <span>企业信息管理</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="18">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { User, Office } from '@element-plus/icons-vue'

export default {
  name: 'UserCenter',
  components: {
    User,
    Office
  },
  setup() {
    const router = useRouter()
    const username = ref(localStorage.getItem('username') || '用户')
    const userRole = ref(localStorage.getItem('userRole') || 'user')
    const userAvatar = ref(localStorage.getItem('userAvatar') || '')
    
    // 根据用户角色显示不同的标签
    const roleLabel = computed(() => {
      const roleMaps = {
        'admin': '管理员',
        'designer': '设计师',
        'user': '普通用户'
      }
      return roleMaps[userRole.value] || '普通用户'
    })
    
    // 计算当前激活的菜单
    const activeMenu = computed(() => {
      return router.currentRoute.value.path
    })
    
    // 菜单选择处理
    const handleMenuSelect = (index) => {
      router.push(index)
    }
    
    return {
      username,
      userAvatar,
      roleLabel,
      activeMenu,
      handleMenuSelect
    }
  }
}
</script>

<style scoped>
.user-center-container {
  padding: 20px;
}

.sidebar-card {
  height: 100%;
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.user-profile h3 {
  margin: 15px 0 5px;
  font-size: 18px;
}

.user-profile p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.user-center-menu {
  border-right: none;
  margin-top: 10px;
}

.el-divider {
  margin: 10px 0;
}
</style> 